<link rel="stylesheet" href="${baseStaticUrl}/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${baseStaticUrl}/plugins/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${baseStaticUrl}/plugins/ztree/js/jquery.ztree.excheck.js"></script>
<div class="form-container">
	<div class="box">
        <form action="#" method="post" name="suvForm" id="suvForm">
        	<div class="row visa-row">
                <div id="wait-msg" class="alert alert-info"
                     style="background:url(${baseStaticUrl}/images/ajax-loader.gif) no-repeat scroll 0.5em 50%;display:none"></div>
                <div id="alert-msg" class="alert alert-success" style="display:none"></div>
                <div id="error-msg" class="alert alert-danger" style="display:none"></div>
            </div>
            <div class="row visa-row">
            	<h6 class="mg-b-20 h6-mar-sm">
                    <strong>角色管理</strong>
                </h6>
                <div class="row w-row">
	                 <div class="col-md-6 col-xs-12">
	                 	<div class="row w-row">
	                    	<div class="col-md-2 col-xs-12 w-row1"><span class="span_red">*</span>角色编码</div>
	                        <div class="col-md-10 col-xs-12 w-row2">
	                            <input type="hidden" id="ID" class="form-control form-control-sm" name="SysRole.ID"
	                                   value="${SysRole.ID}">
	                            <input type="text" placeholder="角色编码" class="form-control form-control-sm" id="jsbm" onchange="checkRoleCode()"
	                                   name="SysRole.ROLE_CODE" value="${SysRole.ROLE_CODE}" required="required" maxlength="20"></div>
	                    </div>
	                    <div class="row w-row">
	                    	<div class="col-md-2 col-xs-12 w-row1"><span class="span_red">*</span>角色名称</div>
	                        <div class="col-md-10 col-xs-12 w-row2 colself">
	                            <input type="text" placeholder="角色名称" id="jsm" onchange="checkRoleName()"
	                                class="form-control form-control-sm" name="SysRole.ROLE_NAME" value="${SysRole.ROLE_NAME}"
	                                required="required" maxlength="50"/>
	                        </div>
	                    </div>
	                    <div class="row w-row">
		                    <div class="col-md-2 col-xs-12 w-row1"><span class="span_red">*</span>状态</div>
		                       <div class="col-md-10 col-xs-12 w-row2">
		                            <epoch:radio name="SysRole.STATUS" id="zt" list="${lisFun.getDictCode('PUB_ENABLE_DISABLE')}"
		                                checked="${SysRole.STATUS!=null ? SysRole.STATUS:'ENABLE'}"></epoch:radio></div>
                       </div>
                       <div class="row w-row">
                          <div class="col-md-2 col-xs-12 w-row1"><span class="span_red">*</span>角色类型</div>
                          <div class="col-md-10 col-xs-12 w-row2">
                            <epoch:select list="${lisFun.getDictCode('SYS_ROLE_TYPE')}" name="SysRole.ROLE_TYPE" id="jslx"
                                value="${SysRole.ROLE_TYPE!}"></epoch:select>
                          </div>
                      </div>
                      <div class="row w-row">
	                        <div class="col-md-2 col-xs-12 w-row1">描述</div>
	                        <div class="col-md-10 col-xs-12 w-row2"><textarea rows="4" cols="129" id="COMMENTS" maxlength="255"
	                            style=" width: 100%; resize:none;word-break: break-all; "
	                            name="SysRole.COMMENTS">${SysRole.COMMENTS}</textarea></div>
	                   </div>
	               </div>
	               <div class="col-md-6 col-xs-12">
                       <div class="row w-row">
                            <div class="col-md-2 col-xs-12 w-row1">授权菜单</div>
                           <div class="col-md-10 col-xs-12 w-row2">
                            <input name="menuRole" type="hidden" id="menuRole" value="${SysRole.menuRole!}">
                            <textarea rows="8" cols="129" id="selectRoleText" data-toggle="modal"
                                      data-target="#sysRoleModal" readonly="readonly"
                                      style=" width: 100%; resize:none;word-break: break-all; ">${menuRoleShow!}</textarea>
                           </div>
                       </div>
                   </div>
                </div>
            </div>
        </form>
    </div>
</div>
 <epoch:winOpen id="sysRoleModal" title="分配菜单" backdrop="false" width="380px">
      <ul id="sysMenuTree" class="ztree"></ul>
</epoch:winOpen>
<script type="text/javascript">
	
	_headToolBar.saveBtn(null, null, suv);
	
	//菜单组织树
    var zTreeObj;
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: onCheck
        }

    };
    var zNodes = [{
        name: "菜单树",
        id: "0",
        open: false,
        children:${menuTree}
    }];

    $(document).ready(function () {
        zTreeObj = $.fn.zTree.init($("#sysMenuTree"), setting, zNodes);
    });
    var ids = "";
    var idsName = "";
    function onCheck(event, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("sysMenuTree"),
                nodes = treeObj.getCheckedNodes(true);
        ids = "";
        idsName = "";
        for (var i = 1; i < nodes.length; i++) {
            if (isEmpty(nodes[i].children)) {
                if (i != nodes.length - 1) {
                    ids += nodes[i].id + ",";
                    idsName += nodes[i].name + ",";
                } else {
                    ids += nodes[i].id;
                    idsName += nodes[i].name;
                }
            }
        }
    }
    $("#sysRoleModal_save").click(function () {
        if(!isEmpty(idsName)){
            var text_arr = idsName.split(",");
            var text = text_arr.join("\r\n");
            $("#selectRoleText").val(text);
        }else{
            $("#selectRoleText").val("");
        }
        $("#menuRole").val(ids);
        $("#sysRoleModal").modal('hide');
    });
	//初始化展示弹框的时候调用该方法
    $('#sysRoleModal').on('shown.bs.modal', function () {
        var treeObj = $.fn.zTree.getZTreeObj("sysMenuTree");
        var menuRoleId = $("#menuRole").val();
        if (!isEmpty(menuRoleId)) {
            var data = menuRoleId.split(",");
            for (var i = 0; i < data.length; i++) {
                var node = treeObj.getNodeByParam("id", data[i], null);
                treeObj.checkNode(node, true, true, true);
            }
        }
    })
    
    function suv(){
    	$.ajax({
            url:"${basePath}/sys/role/suv",
            data:$("form").serialize(),
            type:"post",
            success:function(result){
                if(result){
                    if(result.code=="0"){
                        MessageBox.success("保存成功！");
                        //跳转到选项卡1
                        _tabs.showPage("list",null,null,null);
                    }else{
                        MessageBox.error("保存失败！");
                    }
                }else{
                     MessageBox.error("保存失败！");
                }
            },
            error:function(){
                MessageBox.error("服务器错误，请稍后再试！");
            },
            async:false
        });
	}

</script>